<template>
    <div class="mealorder" v-loading="loading">
        <div class="mealorder-select">
            <div :class="[active == 1 ? 'mealorder-select-border' : '']" @click="onActive(1)">本周</div>
            <div :class="[active == 0 ? 'mealorder-select-border' : '']" @click="onActive(0)">下周</div>
        </div>
        <div>
            <el-table :data="foodlist" style="width: 100%" border>
                <el-table-column label="点餐日期" align="center" prop="date">
                    <template slot-scope="{ row }">
                        <span>{{ row.date }}</span>
                        <span>{{ row.week }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="菜单" align="center" prop="title_a"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{ row }">
                        <el-button type="text" @click="onEdit(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="编辑菜单"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <div>
                <div>点餐日期：{{ row.date }} {{ row.week }}</div>
                <div class="dialoginput">
                    <span>菜单：</span>
                    <el-input placeholder="请输入菜单名称" v-model="menu"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { postAdminUserGet_food_list, postAdminUserSet_food_list } from "@/api"
export default {
    data() {
        return {
            loading: false,
            dialogVisible: false,
            row: {},
            active: 1,
            foodlist: [],
            menu: ''
        }
    },
    mounted() {

        this.postAdminUserGet_food_list()
    },
    methods: {
        onConfirm() {
            this.loading = true
            let { menu, row } = this
            if (menu) {
                let data = {
                    order_date: row.date,
                    title_a: menu
                }
                postAdminUserSet_food_list(data).then(res => {
                    this.postAdminUserGet_food_list()
                    this.dialogVisible = false
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
            } else {
                this.loading = false
                this.$message.warning('请输入菜单名称')
            }
        },
        onEdit(e) {
            this.menu = ""
            this.row = e
            this.dialogVisible = true
        },
        onActive(e) {
            this.active = e
            this.postAdminUserGet_food_list()
        },
        postAdminUserGet_food_list() {
            this.loading = true
            let is_toweek = this.active
            let data = {
                is_toweek
            }
            postAdminUserGet_food_list(data).then(res => {
                this.foodlist = res.data
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.dialoginput {
    margin-top: 20px;
    display: flex;
    align-items: center;
    > span {
        width: 60px;
    }
}
.mealorder {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
    .mealorder-select {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        > div {
            width: 120px;
            text-align: center;
            font-size: 20px;
            height: 60px;
            line-height: 60px;
            margin-right: 30px;
        }
        .mealorder-select-border {
            border-bottom: 2px solid #409eff;
            color: #409eff;
        }
    }
}
</style>